<script lang="ts">
    import { enhance } from "$app/forms";

    interface Props {
        active: boolean;
    }

    const { active = true }: Props = $props();
</script>

<div class="flex justify-between">
    <form method="POST" action="?/create" use:enhance>
        <label
            for="AddTodo"
            class="relative w-96 block rounded-md border border-gray-300 shadow-sm focus-within:border-blue-600 focus-within:ring-1 focus-within:ring-blue-600"
        >
            <input
                type="text"
                id="AddTodo"
                class="peer w-full border-none bg-transparent placeholder-transparent focus:border-transparent focus:outline-none focus:ring-0"
                placeholder="Add todo here, then press enter"
                name="title"
            />

            <span
                class="pointer-events-none absolute start-2.5 top-0 -translate-y-1/2 bg-white p-0.5 text-xs text-gray-400 transition-all peer-placeholder-shown:top-1/2 peer-placeholder-shown:text-sm peer-focus:top-0 peer-focus:text-xs"
            >
                Add todo here, then press enter
            </span>
        </label>
    </form>

    <div>
        <a
            class="inline-block rounded border border-indigo-600 px-4 py-3 text-sm font-medium focus:outline-none focus:ring
                {active
                ? 'text-white bg-indigo-600 active:text-indigo-500 hover:bg-transparent hover:text-indigo-600'
                : 'text-indigo-600 hover:bg-indigo-600 hover:text-white active:bg-indigo-500'}"
            href="/?active=true"
        >
            Active
        </a>

        <a
            class="inline-block rounded border border-indigo-600 px-4 py-3 text-sm font-medium focus:outline-none focus:ring
               {!active
                ? 'text-white bg-indigo-600 active:text-indigo-500 hover:bg-transparent hover:text-indigo-600'
                : 'text-indigo-600 hover:bg-indigo-600 hover:text-white active:bg-indigo-500'}"
            href="/?active=false"
        >
            Finished
        </a>
    </div>
</div>
